<template>
  <div v-if="show" class="modal-overlay" @click.self="closeModal">
    <div class="modal-content model-form-modal">
      <div class="modal-header">
        <h2>{{ isEditing ? '编辑模型' : '新增模型' }}</h2>
        <button @click="closeModal" class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        <form @submit.prevent="submitForm">
          <div class="form-group">
            <label for="displayName">显示名称*:</label>
            <input type="text" id="displayName" v-model="localModelForm.display_name" required>
          </div>
          <div class="form-group">
            <label for="modelNameInternal">模型名称 (内部)*:</label>
            <input type="text" id="modelNameInternal" v-model="localModelForm.model_name_internal" placeholder="例如: gpt-3.5-turbo, qwen-plus" required>
          </div>
          <div class="form-group">
            <label for="apiKey">API 密钥{{ isEditing ? ' (如需修改请输入)' : '*' }}:</label>
            <input type="password" id="apiKey" v-model="localModelForm.api_key" :placeholder="isEditing ? '留空则不修改密钥' : '请输入API密钥'" :required="!isEditing">
            <small v-if="isEditing && !localModelForm.api_key" class="form-text">不修改密钥请留空。</small>
            <small class="form-text">注意：API密钥将存储在后端配置文件中，请确保环境安全。</small>
          </div>
          <div class="form-group">
            <label for="apiBaseUrl">API Base URL*:</label>
            <input type="text" id="apiBaseUrl" v-model="localModelForm.api_base_url" placeholder="例如: https://api.openai.com/v1" required>
          </div>
          <div class="form-group form-group-checkbox">
            <label for="isEnabled">启用模型:</label>
            <input type="checkbox" id="isEnabled" v-model="localModelForm.is_enabled">
          </div>
          <div class="form-actions">
            <button type="button" @click="closeModal" class="cancel-button" :disabled="isSubmitting">取消</button>
            <button type="submit" class="save-button" :disabled="isSubmitting">
              {{ isSubmitting ? (isEditing ? '保存中...' : '添加中...') : (isEditing ? '保存更改' : '添加模型') }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

const props = defineProps({
  show: Boolean,
  isEditing: Boolean,
  modelData: Object, // Contains the model data when editing
  isSubmitting: Boolean,
});

const emit = defineEmits(['close', 'save']);

const localModelForm = ref({
  id: null,
  display_name: '',
  api_base_url: '',
  model_name_internal: '',
  api_key: '',
  is_enabled: true,
});

// Watch for changes in props.modelData to update localModelForm when editing
watch(() => props.modelData, (newData) => {
  if (newData && props.isEditing) {
    localModelForm.value = { ...newData, api_key: '' }; // Don't prefill API key
  } else if (!props.isEditing) {
    // Reset form for adding new model
    localModelForm.value = {
      id: null,
      display_name: '',
      api_base_url: '',
      model_name_internal: '',
      api_key: '',
      is_enabled: true,
    };
  }
}, { immediate: true, deep: true });


const closeModal = () => {
  emit('close');
};

const submitForm = () => {
  emit('save', { ...localModelForm.value });
};

</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001; /* Higher than model management modal */
  backdrop-filter: blur(3px); /* Subtle blur effect */
}

.modal-content {
  background-color: white;
  padding: 30px; /* More padding */
  border-radius: 12px; /* More rounded */
  box-shadow: 0 8px 30px rgba(0,0,0,0.25); /* More prominent shadow */
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(1); /* Initial scale for animation */
  transition: transform 0.3s ease-out;
}
.model-form-modal {
  max-width: 600px; /* Slightly wider */
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0; /* Lighter border */
  padding-bottom: 20px; /* More padding */
  margin-bottom: 25px; /* More margin */
}
.modal-header h2 {
  margin: 0;
  font-size: 1.8em; /* Larger heading */
  color: #2c3e50; /* Darker blue */
}
.close-button {
  background: none;
  border: none;
  font-size: 2.5em; /* Larger close button */
  cursor: pointer;
  color: #888;
  padding: 0;
  line-height: 1;
  transition: color 0.3s ease, transform 0.2s ease;
}
.close-button:hover {
  color: #333;
  transform: rotate(90deg); /* Spin effect on hover */
}

.form-group {
  margin-bottom: 20px; /* More margin */
}
.form-group label {
  display: block;
  margin-bottom: 8px; /* More margin */
  font-weight: 600; /* Semi-bold */
  color: #444; /* Slightly darker label */
  font-size: 1.05em; /* Slightly larger font */
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group select {
  width: 100%;
  padding: 12px; /* More padding */
  border: 1px solid #c0c0c0; /* Consistent border */
  border-radius: 8px; /* More rounded */
  box-sizing: border-box;
  font-size: 1em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group select:focus {
  border-color: #007bff; /* Highlight on focus */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}
.form-group input[type="checkbox"] {
  margin-right: 10px; /* More margin */
  vertical-align: middle;
  transform: scale(1.2); /* Slightly larger checkbox */
}
.form-group-checkbox label {
  display: inline-block;
  font-weight: 500; /* Normal weight */
  color: #333;
}
.form-text {
  display: block;
  font-size: 0.85em; /* Slightly larger font */
  color: #6c757d; /* Muted grey */
  margin-top: 6px; /* More margin */
  line-height: 1.4;
}

.form-actions {
  margin-top: 30px; /* More margin */
  text-align: right;
}
.form-actions button {
  color: white;
  padding: 12px 25px; /* More padding */
  border: none;
  border-radius: 8px; /* More rounded */
  cursor: pointer;
  font-size: 1.05em;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.form-actions .save-button {
  background-color: #28a745; /* Success green */
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
}
.form-actions .save-button:hover:not(:disabled) {
  background-color: #218838;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}
.form-actions .cancel-button {
  background-color: #6c757d; /* Muted grey for cancel */
  margin-right: 15px; /* More margin */
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
}
.form-actions .cancel-button:hover:not(:disabled) {
  background-color: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}
.form-actions button:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
</style>
